<template>
  <div id="CreateProductInfo">
    <!--         Breadcrumbs -->
    <div class="breadcrumbs" style="margin: 0px;padding-top: 20px;">
      <ul>
        <li class="home"><a href="index.html" title="Go to Home Page"><strong style="font-size: 18px;">基础数据</strong></a>
          <span>/</span>
        </li>
        <li><strong>产品信息管理</strong><span>/</span></li>
        <li><strong>新增产品信息</strong></li>
      </ul>
    </div>
    <article class="col-main">
      <div class="my-account block block-account" style="padding-left: 20px;">

        <div class="page-title" style="border-bottom: #F1F3F6 1px solid;">
          <h2>新增产品信息</h2>
          <hr>
        </div>

        <form action=">">
          <div class="form-group">
            <strong style="font-weight: 1000;font-size: 20px">产品类别</strong>
            &nbsp;<span style="color: red;font-size: 15px">*</span>
            <div style="padding-left: 20px;">
              <select v-model="product.productType" class="form-control" style="width: 400px">
                <option value="" >-全部-</option>
                <option v-for="item in productTypes" :value=" item.dictionaryEntry ">{{ item.dictionaryEntry }}</option>
              </select>
            </div>
          </div>

          <div class="form-group">
            <strong style="font-weight: 1000;font-size: 20px">产品系列</strong>
            <div style="padding-left: 20px;">
              <input v-on:blur="checkProductSeries" v-model="product.productSeries" class="form-control" placeholder="请输入产品系列" style="width: 400px;">
            </div>
          </div>

          <div class="form-group">
            <strong style="font-weight: 1000;font-size: 20px">产品型号</strong>
            &nbsp;<span style="color: red;font-size: 15px">*</span>
            <div style="padding-left: 20px;">
              <input v-on:blur="checkProductModel" v-model="product.productModel" class="form-control" placeholder="请输入产品型号" style="width: 400px;">
            </div>
          </div>

          <div class="form-group">
            <strong style="font-weight: 1000;font-size: 20px">产品价格</strong>
            &nbsp;<span style="color: red;font-size: 15px">*</span>
            <div style="padding-left: 20px;">
              <input v-on:blur="checkProductPrices" v-model="product.productPrices" class="form-control" placeholder="请输入产品价格" style="width: 400px;"></input>
            </div>
          </div>

          <div class="form-group">
            <strong style="font-weight: 1000;font-size: 20px">产品批次</strong>
            <span style="color: red;font-size: 15px">*</span>
            <div style="padding-left: 20px;">
              <input v-on:blur="checkProductBatch" v-model="product.productBatch" class="form-control" placeholder="请输入产品批次" style="width: 400px;">
            </div>
          </div>

          <div class="form-group">
            <strong style="font-weight: 1000;font-size: 20px">产品单位</strong>
            &nbsp;<span style="color: red;font-size: 15px">*</span>
            <div style="padding-left: 20px;">
              <input v-on:blur="checkProductUnit" v-model="product.productUnit" class="form-control" placeholder="请输入产品单位" style="width: 400px;">
            </div>
          </div>

          <div class="form-group">
            <strong style="font-weight: 1000;font-size: 20px">产品评测地址</strong>
            <span style="color: red;font-size: 15px">*</span>
            <div style="padding-left: 20px;">
              <textarea v-on:blur="checkProductUrl" v-model="product.productUrl" class="form-control" placeholder="请输入产品参数地址" style="width: 400px;"></textarea>
            </div>
          </div>

          <div class="form-group">
            <strong style="font-weight: 1000;font-size: 20px">备注</strong>
            &nbsp;<span style="color: red;font-size: 15px">*</span>
            <div style="padding-left: 20px;">
              <textarea v-on:blur="checkProductRemarks" v-model="product.productRemarks" class="form-control" placeholder="请输入备注" style="width: 400px;"></textarea>
            </div>
          </div>

          <div class="text-center" style="margin-top: 40px;padding-bottom: 30px">
            <input v-on:click="saveProduct" type="button" class="btn btn-primary" value="保存">
            <router-link to="ProductInfoList" class="btn btn-default">返回</router-link>
          </div>
        </form>

      </div>
    </article>
  </div>
</template>

<script>
export default {
  name: "CreateProductInfo",
  data(){
    return{
      productTypes:[],
      product:{
        productType:'',
        productSeries:'',
        productModel:'',
        productPrices:'',
        productBatch:'',
        productUrl:'',
        productRemarks:'',
        productUnit:''
      }
    }
  },
  methods:{
    getProductTypes(){
      this.$axios.get("/dictionary/loadProductType").then(
        res=>{
          this.productTypes = res.data.data
          // console.log(this.productTypes)
        }
      )
    },
    saveProduct(){
      if (this.product.productType == ''){
        this.$message({
          showClose: true,
          message: '请选择产品的类型',
          type: 'error'
        });
        return;
      }else if (this.checkProductSeries() && this.checkProductModel() && this.checkProductPrices()
        && this.checkProductBatch() && this.checkProductUnit() && this.checkProductUrl() && this.checkProductRemarks()){
        this.$axios.post("/product/saveProduct",this.product).then(
          res=>{
            this.$message({
              showClose: true,
              message: res.data.message,
              type: 'success'
            });
            this.$router.push("/MemuBar/ProductInfoList")
          }
        )
      }
    },
    checkProductSeries(){
      if (this.product.productSeries == ''){
        this.$message({
          showClose: true,
          message: '产品系列不可为空',
          type: 'error'
        });
        return false;
      }else {
        return true;
      }
    },
    checkProductModel(){
      if (this.product.productModel == ''){
        this.$message({
          showClose: true,
          message: '产品型号不可为空',
          type: 'error'
        });
        return false;
      }else {
        return true;
      }
    },
    checkProductPrices(){
      if (this.product.productPrices == ''){
        this.$message({
          showClose: true,
          message: '产品单价不可为空',
          type: 'error'
        });
        return false;
      }else {
        return true;
      }
    },
    checkProductBatch(){
      if (this.product.productBatch == ''){
        this.$message({
          showClose: true,
          message: '产品批次不可为空',
          type: 'error'
        });
        return false;
      }else {
        return true;
      }
    },
    checkProductUrl(){
      if (this.product.productUrl == ''){
        this.$message({
          showClose: true,
          message: '产品测评地址不可为空',
          type: 'error'
        });
        return false;
      }else {
        return true;
      }
    },
    checkProductRemarks(){
      if (this.product.productRemarks == ''){
        this.$message({
          showClose: true,
          message: '产品备注不可为空',
          type: 'error'
        });
        return false;
      }else {
        return true;
      }
    },
    checkProductUnit(){
      if (this.product.productUnit == ''){
        this.$message({
          showClose: true,
          message: '产品单位不可为空',
          type: 'error'
        });
        return false;
      }else {
        return true;
      }
    },
  },
  created() {
    this.getProductTypes()
  }
}
</script>

<style scoped>

</style>
